<template>
	<view>

		<view class="title">

			<view class="info-item">
				<text style="color: red;">*</text> <text>昵称：</text> <u-input v-model="userinfos.name" type="text"
					:border="false" maxlength="10" placeholder="请输入姓名" />
			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>性别：</text> <u-radio-group v-model="userinfos.sex"
					@change="radioGroupChange">
					<u-radio active-color="#034096" style="padding:0 20rpx;" v-for="(item, index) in list"
						:key="item.id" :name="item.id">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="info-item" style="display: flex;">
				<text style="color: red;">*</text> <text>出生日期：</text>
				<view @click="show = true">
					{{userinfos.birthday==null?'请选择日期':userinfos.birthday}}
				</view>
				<u-datetime-picker @cancel="show=false" @confirm="dateok" :show="show" v-model="value"
					mode="date"></u-datetime-picker>


			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>电话号码：</text> <input v-model="userinfos.phone" type="number"
					placeholder="请填写手机号" maxlength="11" />
			</view>
			<view class="info-item">
				<text style="color: red;">*</text> <text>地址：</text><input v-model="userinfos.detailedAddress"
					type="text" placeholder="请填写地址" maxlength="30" />
			</view>



		</view>
		<view class="liji-btn" @click="xiugaiBtn">
			修改资料
		</view>
	</view>
</template>

<script>
	import {
		memberUpdateMemberInfo,
		membergetNowMemberInfo
	} from '@/api/home/index.js'
	export default {

		data() {
			return {
				show: false,
				value1: Number(new Date()),
				form: {
					name: null,
					sex: null,
					birthday: null,
					tel: null,
					address: null
				},
				list: [{
						name: '男',
						disabled: false,
						id: 1,
					},
					{
						name: '女',
						disabled: false,
						id: 2
					}, {
						name: '未知',
						disabled: false,
						id: 3
					},

				],
				userinfos: {},
				value: 1
			}
		},
		async onShow() {
			let res = await membergetNowMemberInfo()
			console.log(res);
			// this.userinfos = uni.getStorageSync('userInfo')
			this.userinfos = res.data
			this.userinfos.sex = this.userinfos.sex - 1 + 1

		},
		methods: {
			radioChange(e) {
				console.log(e);
			},
			// 选中任一radio时，由radio-group触发
			radioGroupChange(e) {
				console.log(e);
			},
			dateok(val) {
				// console.log(val.value);
				let cc = this.timestampToDate(val.value)
				this.userinfos.birthday = cc
				console.log(this.userinfos.birthday);
				this.show = false

			},
			timestampToDate(timestamp) {
				const date = new Date(timestamp); // Unix 时间戳是以秒为单位的，所以需要乘以 1000 转换为毫秒  
				const year = date.getFullYear();
				const month = ("0" + (date.getMonth() + 1)).slice(-2); // getMonth() 方法返回的月份是从 0 开始的，所以需要加 1  
				const day = ("0" + date.getDate()).slice(-2);
				const hours = ("0" + date.getHours()).slice(-2);
				const minutes = ("0" + date.getMinutes()).slice(-2);
				const seconds = ("0" + date.getSeconds()).slice(-2);
				return `${year}-${month}-${day} `;
			},
			async xiugaiBtn() {
				this.userinfos.sex = `${this.userinfos.sex}`
				let res = await memberUpdateMemberInfo(this.userinfos)


				if (res.code == 200) {
					uni.switchTab({
						url: `/pages/mine/index`
					})
				}
				uni.setStorageSync('userInfo', this.userinfos)


			}
		}
	}
</script>

<style lang="scss" scoped>
	.title {
		margin: 20rpx 20rpx;
		box-sizing: border-box;
		border-radius: 30rpx;
		width: 710rpx;
		// font-weight: 700;
		padding: 20rpx;
		background-color: #fff;
		font-size: 32rpx;
	}

	.info-title {
		font-weight: 500;
		font-size: 28rpx;
		color: #666666;
		padding: 20rpx 0;
		text-align: center;
		border-bottom: 1rpx solid #eee;

	}

	.info-item {
		display: flex;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 1rpx solid #eee;
	}

	.item-content {
		display: block;
		font-size: 28rpx;
		color: #666666;
		font-weight: 500;

	}

	.liji-btn {
		box-sizing: border-box;
		text-align: center;
		color: #fff;
		padding: 20rpx 0;
		margin: 30rpx;
		background-color: #034096;
		border-radius: 30rpx;
		font-size: 36rpx;
		// font-weight: 700;
	}
</style>